<#include "common/resource.ftl" />
</head>

<!-- body classes:
        "boxed": boxed layout mode e.g. <body class="boxed">
        "pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1">
-->
<body>
<!-- scrollToTop -->
<!-- ================ -->
<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

<!-- page wrapper start -->
<!-- ================ -->
<div class="page-wrapper">

    <!-- header-top start -->
    <!-- ================ -->
    <#include "common/top-header.ftl" />
    <!-- header-top end -->

    <!-- header start (remove fixed class from header in order to disable fixed navigation mode) -->
    <!-- ================ -->
    <#include "common/header.ftl" />
    <!-- header end -->

    <!-- page-intro start-->
    <!-- ================ -->
    <div class="page-intro">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb">
                        <li><i class="fa fa-home pr-10"></i><a href="index.html">Oylan</a></li>
                        <li class="active">Blog</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- page-intro end -->

    <!-- main-container start -->
    <!-- ================ -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main start -->
                <!-- ================ -->
                <div class="main col-md-12">

                    <!-- page-title start -->
                    <!-- ================ -->
                    <h1 class="page-title"><@spring.message "Blog" /> Timeline</h1>
                    <div class="separator-2"></div>
                    <p class="lead"> &nbsp;&nbsp; 在日常工作中学到的重要的技术，遇到的问题的解决经验分享到这里并且给自己留下笔记。<br/>希望随着时间的流逝，积累成一个良好的技术库。 </p>
                    <!-- page-title end -->

                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">

                            <!-- timeline start -->
                            <div class="timeline row">

                                <div class="timeline-icon hidden-xs"><i class="fa fa-angle-double-up"></i></div>

                                <#assign  index = 0 />
                                <#list pager.list as blog >
                                    <div class="timeline-date-label  clearfix">${blog.dateGroup}</div>

                                    <#list blog.project as pro >
                                    <#assign index++ >
                                    <!-- timeline item start -->
                                    <div class="timeline-item <#if  index % 2 == 0 >pull-right</#if> object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="200">
                                        <!-- blogpost start -->
                                        <article class="clearfix blogpost">
                                            <div class="overlay-container">
                                                <#if pro.thumb?exists && pro.thumb != '' >
                                                    <#assign thumb = imageService + pro.thumb />
                                                <#else >
                                                    <#assign thumb = '/resource/home/images/blog-2.jpg' />
                                                </#if>
                                                <img src="${thumb}" alt="">
                                                <div class="overlay">
                                                    <div class="overlay-links">
                                                        <a href="/blog/details?id=${pro.id}"><i class="fa fa-link"></i></a>
                                                        <a href="${thumb}" class="popup-img-single" title="image title"><i class="fa fa-search-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="blogpost-body">
                                                <div class="post-info">
                                                    <span class="day"> ${pro.createTime?string('dd')} </span>
                                                    <span class="month"> ${blog.dateGroup} </span>
                                                </div>
                                                <div class="blogpost-content">
                                                    <header>
                                                        <h2 class="title"><a href="/blog/details?id=${pro.id}"> ${pro.title} </a></h2>
                                                        <div class="submitted"><i class="fa fa-user pr-5"></i> by <a href="#">John Doe</a></div>
                                                    </header>
                                                    <p>
                                                        ${pro.introduction}
                                                    </p>
                                                </div>
                                            </div>
                                            <footer class="clearfix">
                                                <ul class="links pull-left">
                                                    <li><i class="fa fa-comment-o pr-5"></i> <a href="#">${pro.liked} <@spring.message "Comments" /> </a> |</li>
                                                    <li><i class="fa fa-eye pr-5"></i> <a href="#"><@spring.message "View" />  ${pro.view}</a></li>
                                                </ul>
                                                <a class="pull-right link" href="/blog/details?id=${pro.id}"><span> <@spring.message "ReadMore" />  </span></a>
                                            </footer>
                                        </article>
                                        <!-- blogpost end -->
                                    </div>
                                    <!-- timeline item end -->

                                    </#list>

                                </#list>


                            </div>
                            <!-- timeline end -->

                            <div class="text-center">
                                <#if pager.totalRow gt pager.eveyPageRow * pager.totalPage  >
                                        <a href="#" class="btn btn-default"> <@spring.message "LoadMore" /> </a>
                                    <#else >
                                        <a href="#" class="btn btn-gray" disabled="true" > <@spring.message "NoMore" /> </a>
                                </#if>

                            </div>

                        </div>
                    </div>

                </div>
                <!-- main end -->

            </div>
        </div>
    </section>
    <!-- main-container end -->


    <#include  "common/footer.ftl" />
    <!-- footer end -->

</div>
<!-- page-wrapper end -->

<!-- JavaScript files placed at the end of the document so the pages load faster
================================================== -->
<!-- Jquery and Bootstap core js files -->
<#include "common/end-script.ftl" />

</body>
</html>
